<template>
  <div class="custom-flex-cont-vertical">
    <el-form :inline="true" size="mini" class="custom-form" label-width="auto">
      <el-form-item label="角色代码">
        <el-input v-model="queryParams.code" placeholder="输入代码"></el-input>
      </el-form-item>
      <el-form-item label="角色名称">
        <el-input v-model="queryParams.name" placeholder="输入中文名"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <Available v-model="queryParams.state"></Available>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query()">查询</el-button>
      </el-form-item>
    </el-form>
    <!--工具栏-->
    <el-row class="custom-row">
      <el-button size="mini" plain type="primary" @click="openAddEdit()" v-if="hasPerm('role-add')">
        <i class="fa fa-plus-circle"></i>&nbsp;新增角色
      </el-button>
      <el-button size="mini" plain v-bind:disabled="selectedRows.length==0" @click="enablePerms(null, true)" v-if="hasPerm('role-enable')">
        <i class="fa fa-unlock"></i>&nbsp;启用角色
      </el-button>
      <el-button size="mini" plain v-bind:disabled="selectedRows.length==0" @click="enablePerms(null, false)" v-if="hasPerm('role-enable')">
        <i class="fa fa-lock"></i>&nbsp;禁用角色
      </el-button>
      <el-button size="mini" plain type="danger" v-bind:disabled="selectedRows.length==0" @click="deletePerms()" v-if="hasPerm('role-del')">
        <i class="fa fa-trash"></i>&nbsp;删除角色
      </el-button>
    </el-row>
    <!--查询结果列表-->
    <div class="custom-flex-cont-vertical fit-all custom-shadow">
      <el-table
        v-loading="loading"
        :data="tableData"
        @selection-change="multiSelectedChange">
        <template slot="empty">
          <empty-tip></empty-tip>
        </template>
        <el-table-column
          type="selection"
          :selectable="canEditDel"
          width="55">
        </el-table-column>
        <el-table-column
          type="index"
          width="40">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="name"
          label="角色名称">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="code"
          label="角色代码">
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态">
          <template slot-scope="scope">
            <el-tag type="success" size="medium" v-if="scope.row.state===1">启用</el-tag>
            <el-tag type="danger" size="medium" v-else>禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="130">
          <template slot-scope="scope">
            <!--<el-tooltip class="item" effect="dark" content="赋予权限" v-if="hasPerm('role-edit')">-->
              <!--<el-button type="text" @click="openBindPerm(scope.row)"><i class="fa fa-shield"></i></el-button>-->
            <!--</el-tooltip>-->
            <el-tooltip class="item" effect="dark" content="修改" v-if="hasPerm('role-edit')">
              <el-button type="text" @click="openAddEdit(scope.row)"><i class="fa fa-edit"></i></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="禁用" v-if="canEditDel(scope.row)&&hasPerm('role-enable')&&scope.row.state===1">
              <el-button type="text" @click="enablePerms(scope.row.id, false)"><i class="fa fa-ban text-danger"></i></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="启用" v-if="canEditDel(scope.row)&&hasPerm('role-enable')&&scope.row.state===0">
              <el-button type="text" @click="enablePerms(scope.row.id, true)"><i class="fa fa-check-circle text-success"></i></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" v-if="canEditDel(scope.row)&&hasPerm('role-del')">
              <el-button type="text" @click="deletePerms(scope.row.id)"><i class="fa fa-trash text-danger"></i></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="custom-pagination"
        @current-change="query"
        :current-page.sync="queryParams.pageNumber"
        :page-size="queryParams.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="tableDataTotal"
        style="text-align:right;">
      </el-pagination>
    </div>
    <!--新增/修改角色-->
    <add-edit-role v-if="showRoleForm" :show.sync="showRoleForm" :roleData="editData"></add-edit-role>
    <!--绑定角色权限-->
    <bind-role :show.sync="showBindForm" :roleData="editData" v-if="showBindForm"></bind-role>
  </div>
</template>

<script>
  import Available from '../../common/AvailableSelect'
  import AddEditRole from './AddEditRoleDialog'
  import BindRole from './BindPermDialog'

  export default {
    name: "index",
    components: {
      AddEditRole,
      BindRole,
      Available,
    },
    data() {
      return {
        // 结果列表操作
        loading: false,
        showRoleForm: false,
        showBindForm: false,
        editData: null,
        queryParams: {
          name:'',
          code:'',
          state:'',
          pageNumber: 1,
          pageSize: 10
        },
        tableData: [],
        tableDataTotal: 0,
        selectedRows: [],
      }
    },
    mounted: function(){
      this.query();
    },
    methods: {
      openAddEdit: function(data){
        if(data)
          this.editData = data;
        else
          this.editData = null;
        this.showRoleForm = true;
      },
      openBindPerm: function(data){
        if(data)
          this.editData = data;
        else
          this.editData = null;
        this.showBindForm = true;
      },
      query: function(currPage){
        if(!currPage)
          this.queryParams.pageNumber = 1;
        this.loading = true;
        this.api.post('/bucket-system/system/role/list', this.queryParams)
          .then((data) => {
            this.tableData = data.data.records;
            this.tableDataTotal = parseInt(data.data.total);
            this.loading = false;
          });
      },
      multiSelectedChange: function(val){
        this.selectedRows = val;
      },
      deletePerms: function(id){
        this.$confirm('该操作是物理删除，不可复原，是否确认删除？')
          .then(() => {
            let _ids = [];
            if(!id && this.selectedRows.length>0){
              this.selectedRows.forEach(function(_s, index, arr){
                _ids.push(_s.id);
              });
            }else
              _ids.push(id);
            this.api.post('/bucket-system/system/role/delete', {id: _ids.join(',')})
              .then((data) => {
                if(data.code===200){
                  this.$message({
                    message: '删除成功',
                    type: 'success'
                  });
                  this.query();
                }else{
                  this.$message.error(data.data);
                }
              });
            done();
          });
      },
      enablePerms: function(id, enable){
        let _ids = [];
        let _url = '/bucket-system/system/role/disable';
        if(!id && this.selectedRows.length>0){
          this.selectedRows.forEach(function(_s, index, arr){
            _ids.push(_s.id);
          });
        }else
          _ids.push(id);
        if(enable)
          _url = '/bucket-system/system/role/enable';
        this.api.post(_url, {id: _ids.join(',')})
          .then((data) => {
            if(data.code===200){
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              this.query();
            }else{
              this.$message.error(data.data);
            }
          });
      },
      canEditDel: function(row){
        return row.code.indexOf('admin')===-1
      }
    }
  }
</script>
